<template>
	<div class="web-main">
		<!-- 轮播图 -->
		<div class="banner-box">
			<div class="banner-wrapper">
				<div class="banner">
					<!-- <div class="menu-box">
						<div class="menu-item" v-for="(item, index) in menuNavs" :key="item.id">
							<span class="title">{{ item.nav }}: </span>
							<span class="sub-title">{{ item.name }}</span>
							<i class="el-icon-caret-right"></i>
							<div class="submenu" :style="{ top: -index*50-15+'px'}">
								<div class="sub-title">{{ item.nav }}</div>
								<div class="tag-content">
									<div class="tag-item" v-for="sub in item.content" :key="sub.id">
										<div class="tag-label">{{ sub.name }}: </div>
										<div class="tag-btns">
											<div class="tag-btn" v-for="(tag, ind) in sub.tags" :key="ind">{{ tag }}</div>
										</div>
									</div>
								</div>
								<div class="recommend">
									<div class="recommend-item">
										<img src="@/assets/images/cards/001.jpg" alt="" class="re-img">
										<div class="details">
											<div class="re-name">前端高级工程师（大前端）</div>
											<div class="re-price">￥299</div>
										</div>
									</div>
									<div class="recommend-item">
										<img src="@/assets/images/cards/002.jpg" alt="" class="re-img">
										<div class="details">
											<div class="re-name">前端高级工程师（大前端）</div>
											<div class="re-price">￥299</div>
										</div>
									</div>
									<div class="recommend-item">
										<img src="@/assets/images/cards/003.jpg" alt="" class="re-img">
										<div class="details">
											<div class="re-name">前端高级工程师（大前端）</div>
											<div class="re-price">￥299</div>
										</div>
									</div>
									<div class="recommend-item">
										<img src="@/assets/images/cards/004.jpg" alt="" class="re-img">
										<div class="details">
											<div class="re-name">前端高级工程师（大前端）</div>
											<div class="re-price">￥299</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div> -->
					<div class="banner-content">
						<el-carousel arrow="always" height="480px" :interval="5000">
							<el-carousel-item v-for="item in bannerList" :key="item.id">
								<div class="img-box">
									<img class="slide-img" :src="baseUrl+item.imageUrl" :alt="item.remark">
									<div class="remark">{{item.remark}}</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
				</div>
			</div>
		</div>

		<!-- 课程列表 -->
		<div class="category-wrapper">
			<div class="category-box" v-for="(value, key, index) in category" :key="index">
				<template v-if="value.length > 0">
					<div class="hd">
						<div class="ctname"><img src="@/assets/images/icons/icon-fl.png" alt="">{{ key }}</div>
						<div class="more" @click="handleMore()">更多&gt;</div>
					</div>
					<div class="bd">
						<div class="cards">
							<div class="card" v-for="item in value" @click="handleShopDetail(item.id)">
								<img class="thumb" :src="baseUrl+item.imageUrl" />
								<div class="name">{{ item.title }}</div>
								<div class="price">
									<div class="price-text" v-if="item.price && item.price !== 0">￥{{ item.price }}</div>
									<div class="price-free" v-if="!item.price || item.price == 0">免费</div>
									<div class="collect" v-if="!item.price || item.price == 0">
										<i class="el-icon-star-off"></i>收藏
									</div>
								</div>
								
							</div>
						</div>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
import { listImages, listCourse } from '@/api/web/index'
export default {
	name: 'WebMain',
	data() { 
		return { 
			baseUrl: process.env.VUE_APP_BASE_API,
			//轮播图
			bannerList: [],
			//轮播菜单
			menuNavs: [],
			//课程分类字典
			courseDict: [],
			//课程分类列表
			category: {}
		}
	},
	mounted() { 
		this.queryBannerList();
		this.queryNavs();
		this.queryDictData();
	},
	methods: {
		/**
		 * 查询分类字典
		 */
		async queryDictData() {
			let res = await this.getDicts('course_type');
			let _category = {};
			if (res.code == 200) { 
				this.courseDict = res.data;
				res.data.forEach(item => { 
					_category[item.dictLabel] = [];
				})
				this.category = _category;
				this.queryCategoryList();
			}
		},
		/**
		 * 查询轮播列表
		 */
		async queryBannerList() { 
			let res = await listImages();
			if (res.code == 200) { 
				this.bannerList = res.rows;
			}
		},
		/**
		 * 轮播菜单列表
		 */
		queryNavs() { 
			let menuNavs = [
				{
					id: 1,
					nav: '前沿技术',
					name: '人工智能 / AIGC / 大模型',
					content: [
						{
							id: '001',
							name: '前沿技术',
							tags: ['机器学习', 'ChatGPT', 'AI语音', '人工智能', '微服务', '区块链', '以太坊',
								'深度学习', '计算机视觉', 'NLP自然语言处理', '数据分析&挖掘']
						},
						{
							id: '002',
							name: '云计算&大数据',
							tags: ['大数据','Hadoop','Spark','Hbase','Flink','Storm','云计算','AWS','Docker','Kubernetes']
						}
					]
				},
				{
					id: 2,
					nav: '前端开发',
					name: 'HTML5 / Vue.js / Node.js',
					content: [
						{
							id: '001',
							name: '前端开发',
							tags: ['Vue.js', 'Typescript', 'React.JS', 'HTML / CSS', 'JavaScript', 'Angular', 'Node.js', 'jQuery',
								'Bootstrap', 'Sass / Less', 'WebApp', '小程序', '前端工具','CSS','Html5','CSS3']
						}
					]
				},
				{
					id: 3,
					nav: '后端开发',
					name: ' Java / Python / Go',
					content: [
						{
							id: '001',
							name: '后端开发',
							tags: ['Vue.js', 'Typescript', 'React.JS', 'HTML / CSS', 'JavaScript', 'Angular', 'Node.js', 'jQuery',
								'Bootstrap', 'Sass / Less', 'WebApp', '小程序', '前端工具','CSS','Html5','CSS3']
						}
					]
				},
				{
					id: 4,
					nav: '移动开发',
					name: 'Flutter / Android / iOS',
					content: [
						{
							id: '001',
							name: '移动开发',
							tags: ['Vue.js', 'Typescript', 'React.JS', 'HTML / CSS', 'JavaScript', 'Angular', 'Node.js', 'jQuery',
								'Bootstrap', 'Sass / Less', 'WebApp', '小程序', '前端工具','CSS','Html5','CSS3']
						}
					]
				},
				{
					id: 5,
					nav: '计算机基础',
					name: '算法 / 数学 / 数据库',
					content: [
						{
							id: '001',
							name: '计算机基础',
							tags: ['Vue.js', 'Typescript', 'React.JS', 'HTML / CSS', 'JavaScript', 'Angular', 'Node.js', 'jQuery',
								'Bootstrap', 'Sass / Less', 'WebApp', '小程序', '前端工具','CSS','Html5','CSS3']
						}
					]
				},
				{
					id: 6,
					nav: '测试运维',
					name: '自动化测试 / 容器',
					content: [
						{
							id: '001',
							name: '测试运维',
							tags: ['Vue.js', 'Typescript', 'React.JS', 'HTML / CSS', 'JavaScript', 'Angular', 'Node.js', 'jQuery',
								'Bootstrap', 'Sass / Less', 'WebApp', '小程序', '前端工具','CSS','Html5','CSS3']
						}
					]
				},
				{
					id: 7,
					nav: '更多方向',
					name: '产品设计 / UI设计 / 游戏',
					content: [
						{
							id: '001',
							name: '更多方向',
							tags: ['Vue.js', 'Typescript', 'React.JS', 'HTML / CSS', 'JavaScript', 'Angular', 'Node.js', 'jQuery',
								'Bootstrap', 'Sass / Less', 'WebApp', '小程序', '前端工具','CSS','Html5','CSS3']
						}
					]
				},
				{
					id: 8,
					nav: '移动开发',
					name: 'Flutter / Android / iOS',
					content: [
						{
							id: '001',
							name: '移动开发',
							tags: ['Vue.js', 'Typescript', 'React.JS', 'HTML / CSS', 'JavaScript', 'Angular', 'Node.js', 'jQuery',
								'Bootstrap', 'Sass / Less', 'WebApp', '小程序', '前端工具','CSS','Html5','CSS3']
						}
					]
				},
				{
					id: 9,
					nav: '移动开发',
					name: 'Flutter / Android / iOS',
					content: [
						{
							id: '001',
							name: '移动开发',
							tags: ['Vue.js', 'Typescript', 'React.JS', 'HTML / CSS', 'JavaScript', 'Angular', 'Node.js', 'jQuery',
								'Bootstrap', 'Sass / Less', 'WebApp', '小程序', '前端工具','CSS','Html5','CSS3']
						}
					]
				}
			];

			this.menuNavs = menuNavs;
		},
		/**
		 * 查询分类列表
		 */
		async queryCategoryList() { 
			let res = await listCourse();
			if (res.code == 200) { 
				res.rows.forEach(item => { 
					this.category[item.categoryName].push(item);
				})
			}
		},
		/**
		 * 详情
		 */
		handleShopDetail(id) { 
			this.$router.push({
				path: '/webDetail',
				query: { id }
			})
		},
		/**
		 * 更多
		 */
		handleMore() { 
			this.$router.push('/webCategory')
		}
	}
}
</script>

<style lang="scss" scoped>
.web-main {
	width: 100%;
	.banner-box {
		width: 100%;
		padding: 32px 0;
		box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
		background-image: linear-gradient(to bottom, #f6fbea, #fff);
		.banner-wrapper {
			max-width: 1230px;
			min-width: 1152px;
			margin: 0 auto;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			.banner {
				display: flex;
				width: 100%;
				height: 482px;
				flex-direction: row;
				.menu-box {
					width: 256px;
					height: calc(100% - 2px);
					padding: 15px 0;
					background: #39364d;
					.menu-item {
						line-height: 50px;
						cursor: pointer;
						position: relative;
						color: #fff;
						padding: 0 14px;
						border-top-left-radius: 4px;
						border-bottom-left-radius: 4px;
						height: 50px;
						transition: all .1s;
						font-size: 14px;
						&:hover {
							background: rgba(255, 255, 255, 0.1);
							.submenu {
								display: block;
							}
						}
						.sub-title {
							font-size: 12px;
						}
						> i {
							position: absolute;
							right: 4px;
							top: 20px;
							color: rgba(255, 255, 255, 0.5);
							font-size: 12px;
						}
					}
				}
				.banner-content {
					width: 100%;
					height: 100%;
					.img-box {
						position: relative;
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						.remark {
							position: absolute;
							left: 0;
							bottom: 0;
							width: 100%;
							height: 50px;
							line-height: 50px;
							font-size: 18px;
							color: #fff;
							padding-left: 20px;
							background-color: rgba(0, 0, 0, 0.8);
							z-index: 99;
						}
					}
					.slide-img {
						width: 100%;
						height: 100%;
						cursor: pointer;
					}
				}
				.submenu {
					position: absolute;
					left: 256px;
					width: 774px;
					height: 482px;
					background: #FFFFFF;
					box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
					display: none;
					z-index: 99;
					.sub-title {
						width: 100%;
						height: 50px;
						font-size: 16px !important;
						color: #fff;
						line-height: 50px;
						font-weight: bold;
						padding-left: 20px;
						background-color: #97c225;
					}
					.tag-content {
						display: flex;
						width: 100%;
						height: 204px;
						flex-direction: column;
						padding-top: 20px;
						.tag-item {
							display: flex;
							width: 100%;
							height: auto;
							flex-direction: row;
							padding-left: 20px;
							align-items: flex-start;
							margin-bottom: 10px;
							.tag-label {
								color: #1C1F21;
								font-weight: 600;
								white-space: nowrap;
								margin-right: 5px;
								line-height: 24px;
							}
							.tag-btns {
								display: flex;
								flex-direction: row;
								flex-wrap: wrap;
								.tag-btn {
									color: #6D7278;
									margin-right: 24px;
									line-height: 24px;
								}
							}
						}
					}
					.recommend {
						display: flex;
						width: 100%;
						height: 226px;
						background-color: #F3F5F6;
						padding: 35px 36px;
						flex-direction: row;
						flex-wrap: wrap;
						.recommend-item {
							display: flex;
							width: 329px;
							flex-direction: row;
							align-items: center;
							.re-img {
								width: 90px;
								height: 50px;
							}
							.details {
								width: 228px;
								height: 50px;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								padding-left: 20px;
								.re-name {
									color: #1C1F21;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									font-size: 12px;
									line-height: 20px;
								}
								.re-price {
									line-height: 18px;
									color: #F01414;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}
	}

	.category-wrapper {
		width: 100%;
		box-shadow: 0 2px 4px 0 rgba(7, 17, 27, 0.06);
		background-color: #f5f7fa;
		padding: 32px 0;
		.category-box {
			max-width: 1230px;
			min-width: 1152px;
			margin: 0 auto;
			.hd {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 40px;
				padding: 32px 0;
				.ctname {
					display: flex;
					font-size: 24px;
					font-weight: 600;
					color: #444;
					flex-direction: row;
					align-items: center;
					> img {
						width: 40px;
						height: 40px;
						margin-right: 5px;
					}
				}
				.more {
					font-size: 14px;
					cursor: pointer;
					color: #999;
				}
			}
			.bd {
				width: 100%;
				padding-top: 10px;
				margin-bottom: 20px;
				.cards {
					display: flex;
					width: 100%;
					flex-direction: row;
					flex-wrap: wrap;
					.card {
						border: 1px solid #E4E4E4;
						margin: 0 32px 13px 0;
						width: 283px;
						height: 250px;
						box-sizing: border-box;
						position: relative;
						z-index: 0;
						cursor: pointer;
						box-shadow: 0 6px 10px 0 rgba(95, 101, 105, 0.15);
						&:nth-child(4n) {
							margin-right: 0;
						}
						.thumb {
							width: 100%;
							height: 152px;
						}
						.name {
							width: 100%;
							line-height: 24px;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							text-overflow: ellipsis;
							transition: all .5s ease-out;
							padding: 0 15px;
							color: #545C63;
							font-size: 14px;
							overflow: hidden;
						}
						.price {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							padding: 5px 15px 0 15px;
							.price-text {
								font-size: 14px;
								color: #F01414;
								font-weight: 600;
							}
							.price-free,
							.collect {
								color: #9199a1;
								font-size: 14px;
							}
							.shopcart {
								display: flex;
								flex-direction: row;
								align-items: center;
								color: #ff655d;
								font-size: 14px;
								.shop-icon {
									margin-right: 2px;
								}
							}
							.collect {
								> i {
									margin-right: 2px;
								}
							}
						}
						&:hover {
							transform: translateY(-2px);
							box-shadow: 0 12px 20px 0 rgba(95, 101, 105, 0.15);
							.name {
								color: #97c225;
							}
						}
					}
				}
			}
		}
	}
}

.category-box .bd .card::before {
    border-bottom: 1px solid #97c225;
    border-top: 1px solid #97c225;
    transform: scale(0, 1);
    -ms-transform: scale(0, 1);
}

.category-box .bd .card::after {
    border-left: 1px solid #97c225;
    border-right: 1px solid #97c225;
    transform: scale(1, 0);
    -ms-transform: scale(1, 0);
}

.category-box .bd .card::before, .category-box .bd .card::after {
    box-sizing: border-box;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
    -ms-transition: opacity 0.35s ease 0s, -ms-transform 0.35s ease 0s;
    width: 100%;
    z-index: -1;
}

.category-box .bd .card:hover::before, .category-box .bd .card:hover::after {
    opacity: 1;
    transform: scale(1,1);
}
</style>